<template>
  <div>
    <!-- 添加或修改公告对话框 -->
    <el-dialog :title="title" :visible.sync="$parent.open" width="780px" append-to-body>
      <div class="center_dialog">
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
          <el-form-item label="分类" prop="inspectionTypeId">
            <el-cascader v-model="form.inspectionTypeId" :options="typeList" style="width:100%"></el-cascader>
          </el-form-item>
          <el-form-item label="巡检项目描述" prop="projectDescribe">
            <el-input v-model="form.projectDescribe" placeholder="请输入巡检项目描述" />
          </el-form-item>
          <el-form-item label="巡检结果类型" prop="resultType">
            <el-select v-model="form.resultType" @change="handlerType" placeholder="请选择巡检结果类型" style="width:100%">
              <el-option v-for="(dict, index) in ascArr" :key="index" :label="dict" :value="index + ''">
              </el-option>
            </el-select>
          </el-form-item>
          <template v-if="form.resultType !== '3' && form.resultType">
            <el-form-item v-for="(v, i) in form.inspectionProjectResultList" :key="i"
              :label="['', '巡检结果选项', '巡检结果选项', '', '巡检结果输入'][form.resultType]"
              :rules="rules.inspectionProjectResultList" :prop="`inspectionProjectResultList[${i}].optionName`">
              <el-input v-model="v.optionName" placeholder="请输入巡检项目描述" style="width:85%" />
              <el-button v-if="i === 0" style="margin-left: 10px;" @click="add()" type="primary" icon="el-icon-plus"
                circle>
              </el-button>
              <el-button v-else style="margin-left: 10px;" type="danger" @click="del(i)" icon="el-icon-delete" circle>
              </el-button>
            </el-form-item>
          </template>
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="form.sort" style="width: 100%;" :min="1" controls-position="right">
            </el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <div align="center" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="() => $parent.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getinspectiontypeList, Updateinspectionproject, Createdinspectionproject } from "@/api/system/difftype.js";
// import Upload from '@/components/upload/index.vue'
export default {
  props: ['title', 'rowObj'],
  components: {
    // Upload
  },
  data () {
    return {

      form: {
        "projectDescribe": "",   //项目描述
        "inspectionTypeId": '', //巡检分类id
        "resultType": "",   //巡检结果类型(1单选 2多选 3单项输入 4多项输入)
        "sort": undefined,     //排序
        "inspectionProjectResultList": [ //巡检项目结果选项对象集合
          { "optionName": "" },  //选项名称
        ]
      },
      typeList: [],
      rules: {
        inspectionTypeId: { required: true, message: '必填', trigger: ['blur', 'change'] },
        projectDescribe: { required: true, message: '必填', trigger: ['blur', 'change'] },
        resultType: { required: true, message: '必填', trigger: ['blur', 'change'] },
        inspectionProjectResultList: { required: true, message: '必填', trigger: ['blur', 'change'] },
        sort: { required: true, message: '必填', trigger: ['blur', 'change'] },
      }
    }
  },
  computed: {
    ascArr () {
      return {
        '1': '单选',
        '2': '多选',
        '3': '单项输入',
        '4': '多项输入'
      }
    }
  },
  watch: {
  },
  created () {
    this.getlist()
  },
  methods: {
    handlerType () {
      this.form.inspectionProjectResultList = [{ "optionName": "" }]
    },
    add () {
      this.form.inspectionProjectResultList.push({
        optionName: ''
      })
    },
    del (index) {
      this.form.inspectionProjectResultList.splice(index, 1)
    },
    recursion (data) {
      return data.map(item => {
        if (item.children) {
          return {
            ...item,
            children: this.recursion(item.children),
            value: item.id,
            label: item.typeName
          }
        } else {
          return {
            ...item,
            value: item.id,
            label: item.typeName
          }
        }
      })
    },
    async getlist () {
      let { data: data } = await getinspectiontypeList();
      this.typeList = this.handleTree(data)
      this.typeList = this.typeList.map(item => {
        return {
          ...item,
          disabled: item.children ? false : true
        }
      })
      this.typeList = this.recursion(this.typeList)
      if (this.title === '修改项目') {//修改进入
        this.form = { ...this.rowObj }
        this.form.inspectionTypeId = [this.rowObj.inspectionTypeParentId, this.rowObj.inspectionTypeId]
      }
    },
    handlerParent (id) {
      this.typeList.forEach(element => {
        if (element.id === id) {
          this.form.ascription = element.ascription
        }
      });
    },
    //提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.title === '修改项目') {//修改
            let params = {
              ...this.form,
              inspectionTypeId: this.form.inspectionTypeId[this.form.inspectionTypeId.length - 1]
            }
            Updateinspectionproject(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.$parent.open = false
                // this.$parent.$parent.$refs['search'].handleSelect()
                this.$parent.$parent.$refs['search'].queryParams.ascription = undefined

                // this.$parent.getList()//重新查询列表
              }
            })
          } else {//新增
            let params = {
              ...this.form,
              inspectionTypeId: this.form.inspectionTypeId[this.form.inspectionTypeId.length - 1]
            }
            Createdinspectionproject(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.$parent.open = false
                this.$parent.$parent.$refs['search'].queryParams.ascription = undefined
                this.$parent.handleUpdate()
              }
            })
          }
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 60%;
  margin: 0px auto;
}
</style>